<template>
	<view class="con-box">
		<view class="backImg">
			<view class="backImg-left">
				<view @tap="back" class="backImg-left">
					<image src="../../static/detail/back.png" mode="widthFix"></image>
				</view>
			</view>
			<view>消息</view>
			<view class="backImg-right"></view>
		</view>
		<view class="news-list">
			<view class="listItems" v-for="(im,i) in newsList" :key="i">
				<view class="title">
					<text class="name" :class="im.isRead == 0?'active':''">{{im.title}}</text>
					<text>{{moment(im.created).format('YYYY/MM/DD')}}</text>
				</view>
				<view class="msg">{{im.msg}}</view>
				<!-- 1官方2抢购信息3退款 -->
				<navigator :url="im.type==2?`/pages/detail/index?id=${im.id}&path=sale`:''" class="seeInfo">
					<text>查看详情</text>
					<u-icon name="arrow-right" color="rgba(255, 255, 255, 0.5)" size="12"></u-icon>
				</navigator>
			</view>
			
			<view class="noData" v-if="newsList.length == 0">
				<image class="noDataImg" src="../../static/noData.png" mode=""></image>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getUserNftusermsg
	} from '../../api/user.js'
	export default {
		data(){
			return {
				loadingS:false,
				newsList:[],
				listQuery: {
					page: 1,
					pageSize: 10,
					isRead:"",//	1已读2未读
					type:"",//1官方2抢购信息3退款
					pages:1
				},
			}
		},
		onLoad(options) {
			this.getNewsData();
		},
		methods:{
			getNewsData(){
				getUserNftusermsg(this.listQuery).then(res => {
					this.listQuery.pages = res.data.totalPage;
					if (res.data.rows.length == 0) {
						return;
					}
					let newList = res.data.rows.filter((item, index) => {
						return item
					});
					
					if (this.listQuery.page == 1) {
						this.newsList = [...newList];
					} else {
						this.newsList = [...this.newsList, ...newList];
					}
				}).catch(err=>{
				});
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
		onReachBottom() {//页面滚动到底部
			if(this.listQuery.pages > this.listQuery.page){
				this.listQuery.page++;
				this.getNewsData();
			}else{
				this.isEnd = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 140upx 40upx 50upx;
		.news-list{
			.noData{
				width:100%;
				height: 180upx;
				text-align: center;
				padding-top: 200upx;
				.noDataImg{
					width: 220upx;
					height: 180upx;
				}
			}
			.listItems{
				padding:30upx;
				background-color: #2C2A2A;
				border-radius: 10upx;
				margin-bottom: 20upx;
			}
			.title,.seeInfo{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.msg{
				font-size: 28upx;
				color: rgba(255,255,255,0.8);
				padding-bottom: 30upx;
				border-bottom: 1px solid rgba(255,255,255,0.1);
				margin-bottom: 30upx;
			}
			.seeInfo{
				font-size: 28upx;
				color: rgba(255,255,255,0.8);
			}
			.title{
				color: #fff;
				margin-bottom: 30upx;
				text{
					font-size: 22upx;
				}
				.name{
					font-size: 32upx;
					position: relative;
				}
				.active{padding-left: 20upx;}
				.active::after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 0;
					width: 10upx;
					height: 10upx;
					border-radius: 50%;
					background-color: #FE5400;
					margin-top: -5upx;
				}
			}
		}
		.backImg {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			padding: 40upx;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;

			.backImg-left {
				display: flex;
				align-items: center;

				image {
					width: 20upx;
					height: 45upx;
				}
			}

			.backImg-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				image {
					width: 44upx;
					height: 36upx;
					margin-left: 10upx;
				}

				.share {
					width: 36upx;
					height: 36upx;
				}
			}
		}
		
	}
</style>
